<script setup>
import { ref, onMounted } from 'vue'
import {Search, Refresh, View, Download} from '@element-plus/icons-vue'
import axios from "axios";
import {ElMessage} from "element-plus";

// 查询参数
const queryParams = ref({
  userAccount: '',

})
const pageNum=ref(1);
const  pageSize=ref(10);
// 运动类型选项
const exerciseTypeOptions = [
  { value: 'running', label: '跑步' },
  { value: 'squats', label: '深蹲' },
  { value: 'sitUps', label: '仰卧起坐' },
  { value: 'pushUps', label: '俯卧撑' }
]

// 表格数据
const tableData = ref([])
const total = ref(0)
const loading = ref(false)

// 记录对话框相关
const dialogVisible = ref(false)
const currentUser = ref(null)
const activeTab = ref('running')
const runningData = ref([])
const squatsData = ref([])
const sitUpsData = ref([])
const pushUpsData = ref([])

// 获取表格数据
const fetchData = async () => {
  // alert(queryParams.value.pageNum+""+queryParams.value.pageSize)
  axios.get(`/health/getHealth/8/${pageNum.value}/${pageSize.value}`).then((response) => {
    console.log(response.data.data);
    total.value = response.data.total;
    tableData.value = response.data.data;
  })
}

// 查询
const handleQuery = () => {
  try {
    axios.post(`/health/getHealthData/${pageNum.value}/${pageSize.value}`,queryParams.value).then(response => {
      total.value = response.data.total;
      tableData.value = response.data.data;
    })
  } catch (error) {
    ElMessage.error('查询失败')
  }
}

// 重置
const resetQuery = () => {
  queryParams.value = {
    userAccount: '',
  }
  fetchData()
}

// 分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchData()
}
// 当前页变化
const handleCurrentChange = (val) => {
  pageNum.value = val
  fetchData()
}
// 导出数据
const exportData = () => {
  // axios.get(`/health//download/1/${currentPage.value}/${pageSize.value}`).then((response) => {
  //用同步请求而不是异步请求
  location.href = `http://localhost:8080/health/download/1/${pageNum.value}/${pageSize.value}`;
  ElMessage.success('导出成功');
}
// 查看记录
const handleViewRecord = (row) => {
  currentUser.value = row
  activeTab.value = 'running'
  dialogVisible.value = true
}

// 初始化加载数据
onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="exercise-container">
    <!-- 查询区域 -->
    <div class="query-area">
      <el-card shadow="hover">
        <el-form :model="queryParams" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="用户账号">
                <el-input
                    v-model="queryParams.userAccount"
                    placeholder="请输入用户账号"
                    clearable
                />
              </el-form-item>
            </el-col>
<!--            <el-col :span="6">-->
<!--              <el-form-item label="运动类型">-->
<!--                <el-select-->
<!--                    v-model="queryParams.exerciseType"-->
<!--                    placeholder="请选择运动类型"-->
<!--                    clearable-->
<!--                >-->
<!--                  <el-option-->
<!--                      v-for="item in exerciseTypeOptions"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value"-->
<!--                  />-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="10">-->
<!--              <el-form-item label="时间范围">-->
<!--                <el-date-picker-->
<!--                    v-model="queryParams.dateRange"-->
<!--                    type="daterange"-->
<!--                    range-separator="至"-->
<!--                    start-placeholder="开始日期"-->
<!--                    end-placeholder="结束日期"-->
<!--                    value-format="YYYY-MM-DD"-->
<!--                />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="2" class="button-group">
              <el-button type="primary" @click="handleQuery">
                <el-icon><Search /></el-icon>
                查询
              </el-button>
            </el-col>
            <el-col :span="2" class="button-group">
              <el-button @click="resetQuery">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <!-- 数据区域 -->
    <div class="data-area">
      <div class="header">
        <h3>用户血糖数据统计</h3>
        <el-button type="primary" @click="exportData" >导出数据</el-button>
      </div>
      <el-card shadow="hover">
        <el-table :data="tableData" border style="width: 100%" v-loading="loading">
          <el-table-column prop="userAccount" label="用户账号" width="120" />
          <el-table-column prop="userNickname" label="用户昵称" width="100" />
          <el-table-column prop="runningDistance" label="跑步距离(km)" width="120">
            <template #default="{ row }">
              <span class="running-distance">{{ row.runningDistance || 0 }}Km</span>
            </template>
          </el-table-column>
          <el-table-column prop="squatCount" label="深蹲数量" width="100">
            <template #default="{ row }">
              <span class="squats-count">{{ row.squatCount || 0 }}个</span>
            </template>
          </el-table-column>
          <el-table-column prop="sitUpCount" label="仰卧起坐数量" width="120">
            <template #default="{ row }">
              <span class="sit-ups-count">{{ row.sitUpCount || 0 }}个</span>
            </template>
          </el-table-column>
          <el-table-column prop="pushUpCount" label="俯卧撑数量" width="120">
            <template #default="{ row }">
              <span class="push-ups-count">{{ row.pushUpCount || 0 }}个</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <el-button
                  type="primary"
                  size="small"
                  @click="handleViewRecord(row)"
              >
                <el-icon><View /></el-icon>
                查看记录
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-area">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[1.3,5,10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

    <!-- 查看详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="运动记录详情" width="80%">
      <div class="user-info">
        <span>用户账号: {{ currentUser?.account }}</span>
        <span style="margin-left: 20px;">用户昵称: {{ currentUser?.nickname }}</span>
      </div>
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="跑步记录" name="running">
          <el-table :data="runningData" border height="400">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="distance" label="距离(km)" width="120" />
            <el-table-column prop="duration" label="时长(分钟)" width="120" />
            <el-table-column prop="calories" label="消耗卡路里" width="120" />
            <el-table-column prop="pace" label="配速(分钟/km)" width="120" />
            <el-table-column prop="route" label="路线" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="深蹲记录" name="squats">
          <el-table :data="squatsData" border height="400">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="count" label="数量" width="120" />
            <el-table-column prop="sets" label="组数" width="120" />
            <el-table-column prop="calories" label="消耗卡路里" width="120" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="仰卧起坐记录" name="sitUps">
          <el-table :data="sitUpsData" border height="400">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="count" label="数量" width="120" />
            <el-table-column prop="sets" label="组数" width="120" />
            <el-table-column prop="calories" label="消耗卡路里" width="120" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="俯卧撑记录" name="pushUps">
          <el-table :data="pushUpsData" border height="400">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="count" label="数量" width="120" />
            <el-table-column prop="sets" label="组数" width="120" />
            <el-table-column prop="calories" label="消耗卡路里" width="120" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.exercise-container {
  padding: 20px;
}

.query-area {
  margin-bottom: 20px;
}

.data-area {
  margin-bottom: 20px;
}

.pagination-area {
  display: flex;
  justify-content: flex-end;
}

.button-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.user-info {
  margin-bottom: 15px;
  font-size: 16px;
}

/* 运动数据样式 */
.running-distance {
  color: var(--el-color-primary);
  font-weight: bold;
}

.squats-count {
  color: var(--el-color-success);
}

.sit-ups-count {
  color: var(--el-color-warning);
}

.push-ups-count {
  color: var(--el-color-danger);
}
</style>